<template>
  <div class="page-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="用户信息" name="0"></el-tab-pane>
    </el-tabs>
    <div class="list">
      <div class="item">
        <span>用户ID</span>
        <span class="line">{{ userInfo.userId }}</span>
      </div>
      <div class="item">
        <span>冻结金额</span>
        <span class="line">{{ userInfo.freezeAmount }}</span>
      </div>

      <div class="item">
        <span>姓名</span>
        <span class="line">{{ userInfo.userName }}</span>
      </div>

      <div class="item">
        <span>总金额</span>
        <span class="line">{{ userInfo.totalAmount }}</span>
      </div>

      <div class="item">
        <span>可提现金额</span>
        <span class="line">{{ userInfo.withdrawableAmount }}</span>
      </div>

      <div class="item">
        <span>推荐人数</span>
        <span class="line">{{ userInfo.recommenNum }}</span>
      </div>
      <div class="item"></div>
    </div>

    <el-tabs v-model="activeName1">
      <el-tab-pane label="佣金记录" name="0"></el-tab-pane>
    </el-tabs>
    <el-table :data="record">
      <el-table-column label="佣金明细" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.description }}</span>
          <!--
            <span v-if="scope.row.type === 1">{{ ' ' }}- {{ '用户' + scope.row.recommendationId }}</span>
          -->
        </template>
      </el-table-column>
      <el-table-column label="佣金金额" prop="monry" align="center">

        <template slot-scope="scope">
          <span>{{ (scope.row.type === 0 ? '-' : '+') + scope.row.monry }}</span>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="center">

        <template slot-scope="scope">
          <span>{{ scope.row.createTime | timestampToDate }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination hide-on-single-page :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
      @pagination="getList" />

    <el-card style="margin-top: 4px;" class="footer-card">
      <div class="app-footer" style="text-align:center">
        <el-button align="center" @click="$router.push('/finance/management/index')" type="normal">关闭</el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
import { timestampToDate } from '@/utils/time';
import { listDetail } from '@/api/finance/management';
export default {
  data() {
    return {
      activeName: 0,
      activeName1: 0,
      record: [],
      userInfo: {

      },
      queryParam: {
        pageNum: 1,
        pageSize: 20,
        commissionId: undefined,
      },
      total: 0
    }
  },

  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("row"));
    this.queryParam.commissionId = this.$route.params.id;
  },

  methods: {
    getList() {
      listDetail(this.queryParam, this);
    },
  },

  mounted() {
    listDetail(this.queryParam, this);
  },

  filters: {
    timestampToDate
  }
}
</script>

<style scoped>
@import url("../../../assets/styles/grid.css");

.page-container{
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.footer-card {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
